<template>
    <div class="parkingDetail">
        <el-dialog :visible.sync="isVisiblePro"
                   :show-close="false"
                   width="1000px"
                   :title="title"
        >
            <el-container>
                <el-aside style="width: 50%">
                    <el-alert
                            style="margin:0px auto 15px auto;width: 150px;"
                            title="车库基本信息"
                            center
                            type="info"
                            :closable="false">
                    </el-alert>
                    <el-form v-model="form" :inline="true">
                        <el-form-item label="车库名称:">
                            <el-input :disabled="disabled" v-model="form.parkingName"  size="mini" style="width: 150px" ></el-input>
                        </el-form-item >
                        <el-form-item label="车库图片:">
                            <upload-img :disabled="disabled" v-model="form.picIds"></upload-img>
                        </el-form-item >
                        <el-form-item label="车库种类:">
                            <el-select :disabled="disabled" v-model="form.parkingSortCode" size="mini" style="width: 150px">
                                <el-option  v-for="item in parkingSortOption"
                                            :key="item.id"
                                            :label="item.valueDesc"
                                            :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车库状态:">
                            <el-select :disabled="disabled" v-model="form.parkingStatusCode" size="mini" style="width: 150px">
                                <el-option  v-for="item in parkingStatusOption"
                                            :key="item.id"
                                            :label="item.valueDesc"
                                            :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否营业:">
                            <el-select :disabled="disabled" v-model="form.isBusiness" size="mini" style="width: 150px">
                                <el-option  v-for="item in isBusinessOption"
                                            :key="item.id"
                                            :label="item.valueDesc"
                                            :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车位数目:">
                            <el-input :disabled=true v-model="form.carPlaceNum"  size="mini" style="width: 150px" ></el-input>
                        </el-form-item>
                        <el-form-item label="车库电话:">
                            <el-input :disabled="disabled" v-model="form.parkingPhone"  size="mini" style="width: 150px" ></el-input>
                        </el-form-item>
                        <el-form-item label="车库位置:">
                            <el-input :disabled="disabled" v-model="form.location"  size="mini" style="width: 300px" ></el-input>
                            <el-button style="margin-left: 10px" v-if="disabled==false" type="info" icon="el-icon-location" size="mini" circle @click="showMap"></el-button>
                        </el-form-item>
                        <el-form-item label="车库描述:">
                            <el-input :disabled="disabled" type="textarea" v-model="form.parkingDesc" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-form>
                </el-aside>
                <el-aside style="width: 50%">
                    <el-alert
                            style="margin:0px auto 15px auto;width: 150px;"
                            title="车库营业信息"
                            center
                            type="warning"
                            :closable="false">
                    </el-alert>
                    <el-form v-model="form" label-width="150px">
                        <el-form-item label="预约保留时间:">
                            <el-input-number :disabled="disabled" v-model="form.reservationTime" :precision="1" size="mini" :step="0.1" label="预约订单保留时间"></el-input-number>
                            <span style="margin-left: 5px">分钟</span>
                        </el-form-item >
                        <el-form-item label="折扣:">
                            <el-input-number :disabled="disabled" v-model="form.discount" size="mini" :step="1" :max="10" :min="1" label="折扣"></el-input-number>
                            <span style="margin-left: 5px">折</span>
                        </el-form-item>
                        <el-form-item label="最大停车时间:">
                            <el-input-number :disabled="disabled" v-model="form.maxTime" size="mini" :step="1"  :min="1" label="折扣"></el-input-number>
                            <span style="margin-left: 5px">小时</span>
                        </el-form-item>
                    </el-form>
                </el-aside>
            </el-container>
            <div style="text-align: center">
                <el-button v-if="disabled==false" type="primary" size="mini" @click="save">保存</el-button>
                <el-button type="primary" size="mini" @click="close">关闭</el-button>
            </div>
            <el-dialog
                    width="70%"
                    title="选择位置"
                    :open="initMap"
                    :show-close="false"
                    :visible.sync="innerVisible"
                    :close-on-click-modal="false"
                    :append-to-body="true">
                <div style="margin-bottom: 15px">
                    <h2 style="display: inline-block;">地址：{{marker.location}}</h2>
                    <el-button style="float: right" type="primary" size="normal" @click="innerVisible=false">取消</el-button>
                    <el-button style="float: right;margin-right: 10px" type="primary" size="normal" @click="changeLocation">确定</el-button>
                </div>
                <div id="mapContainer" style="height: 400px">
                </div>
                <div id="myPageTop">
                    <span style="display: block">输入关键字：</span>
                    <input id="SearchLocal" style="float: right"/>
                </div>
            </el-dialog>
            <el-dialog
                    width="70%"
                    title="选择位置"
                    :open="initMap"
                    :show-close="false"
                    :visible.sync="innerVisiblePayRule"
                    :close-on-click-modal="false"
                    :append-to-body="true">
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
    import UploadImg from '../../components/upload/UploadImg'
    const AMap = window.AMap;
    import Message from '../../components/messages/index'
    export default {
        name: "ParkingDetail",
        components: {UploadImg},
        props:{
            isVisiblePro:Boolean,
            title:{
                type:String,
                defaults:""
            },
            parkingData:Object,
            parkingStatusOption:null,
            parkingSortOption:null,
            isBusinessOption:null,
            disabled:Boolean,
        },
        data(){
            return{
                innerVisible:false,
                innerVisiblePayRule:false,
                marker:{
                    longitude:null,
                    latitude:null,
                    location:""
                },
                form: {
                    parkingName: '',
                    parkingStatusCode:null,
                    parkingSortCode:null,
                    maxTime:null,
                    isBusiness:null,
                    carPlaceNum:null,
                    hasCheap:null,
                    discount:null,
                    parkingPhone:null,
                    reservationTime:null,
                    parkingDesc:"",
                    longitude:null,
                    latitude:null,
                    location:"",
                    userId:null
                },
                map:Object,
                autoOptions: {
                    input: "SearchLocal"
                },
                placeSearch: Object,
                autocomplete:Object,
            }
        },
        methods:{
            close(){
                this.$emit("cancel")
            },
            save(){
                let self=this;
                self.updateDatetime=new Date();
                self.$http.post("parking/update",self.form).then((res)=>{
                    if(res.status===200){
                        Message.info("修改成功!");
                        self.$emit("cancel");
                    }
                });
            },
            changeLocation(){
                this.form.longitude=this.marker.longitude;
                this.form.latitude=this.marker.latitude;
                this.form.location=this.marker.location;
                this.innerVisible=false;
            },
            showMap(){
                this.innerVisible=true;
                this.marker.longitude=this.form.longitude;
                this.marker.latitude=this.form.latitude;
                this.marker.location=this.form.location;
                this.$nextTick(()=>{
                    this.initMap();
                })
            },
            initMap(){
                this.map = new AMap.Map('mapContainer', {
                    center:[this.form.longitude,this.form.latitude],
                    resizeEnable: true,
                    zoom: 16,
                    lang: 'zh',
                });
                let startIcon = new AMap.Icon({
                    // 图标尺寸
                    size: new AMap.Size(30, 30),
                    // 图标的取图地址
                    image:require('../../assets/parking.png'),
                    // 图标所用图片大小
                    imageSize: new AMap.Size(30, 30),
                });
                let mark=new AMap.Marker({
                    position:[this.marker.longitude,this.marker.latitude],
                    icon:startIcon,
                });
                this.map.add(mark);
                this.map.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],()=>{
                    this.autocomplete = new AMap.Autocomplete(this.autoOptions);
                    this.placeSearch = new AMap.PlaceSearch({
                        map: this.map
                    });  //构造地点查询类
                });
                AMap.event.addListener(this.autocomplete, "select", this.select);//注册监听，当选中某条记录时会触发
                this.map.on("click",this.clickMap);
                this.map.plugin('AMap.Geolocation',()=>{
                    let geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true,//是否使用高精度定位，默认:true
                        buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    });
                    this.map.addControl(geolocation);
                });
            },
            select(e){
                this.placeSearch.setCity(e.poi.adcode);
                this.placeSearch.search(e.poi.name);  //关键字查询查询
            },
            clickMap(val){
                let { lng, lat } = val.lnglat;
                this.marker.longitude=lng;
                this.marker.latitude=lat;
                let geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                });
                geocoder.getAddress([lng,lat], (status, result) =>{
                    if (status === 'complete' && result.info === 'OK') {
                        if (result && result.regeocode) {
                            this.marker.location = result.regeocode.formattedAddress;
                        }
                    }
                });
                this.map.clearMap();
                let startIcon = new AMap.Icon({
                    // 图标尺寸
                    size: new AMap.Size(30, 30),
                    // 图标的取图地址
                    image: require('../../assets/parking.png'),
                    // 图标所用图片大小
                    imageSize: new AMap.Size(30, 30),
                });
                let mark=new AMap.Marker({
                    position:val.lnglat,
                    icon: startIcon
                });
                this.map.add(mark);
            }
        },
        watch:{
            parkingData:function () {
                this.form=this.parkingData
            }
        },
        mounted() {
            this.initMap();
        }
    }
</script>

<style scoped lang="less">
    .list{
        width: 100%;
        height: calc(~'100vh - 100px');
    }
    .parkingDetail{
        color:#909399 ;
    }
    .formItem{
        margin-bottom: 10px;
    }
    #myPageTop{
        position: absolute;
        bottom: 50px;
        right: 50px;
        background-color: white;
        padding: 5px;
        border: 1px #b0a0a0 solid;
    }

</style>